el<template>
  <div class="audio-controls">
    <el-button @click="playPrevious" ref="playBtn" :disabled="!hasPrevious" class="control-button">
      ◀ 上一句
    </el-button>
    <el-button @click="togglePlayback" ref="previousBtn" class="control-button primary">
      {{ isPlaying ? '⏹ 暂停' : '▶ 播 放' }}
    </el-button>
    <el-button @click="playNext" ref="nextBtn" :disabled="!hasNext" class="control-button"> 下一句 ▶ </el-button>

    <div class="speed-control">
      <span>速度:</span>
      <el-select v-model="playbackSpeed" @change="changeSpeed" class="speed-select">
        <el-option v-for="speed in speedOptions" :key="speed.value" :label="speed.label" :value="speed.value" />
      </el-select>
    </div>
    <el-tour
      @close="tourClose"
      v-model="openTour"
      :mask="{
        style: {
          boxShadow: 'inset 0 0 15px #e6a23c'
        },
        color: '#66666699'
      }"
    >
      <el-tour-step :target="previousBtnRef" title="播放▶">
        <div class="tour-content">按回车键或者空格键播放</div>
      </el-tour-step>
      <el-tour-step :target="playBtnRef" title="⬅️上一句">
        <div class="tour-content">按左键⬅️播放上一句</div>
      </el-tour-step>
      <el-tour-step :target="nextBtnRef" title="下一句➡️">
        <div class="tour-content">按右键➡️播放下一句</div>
      </el-tour-step>
    </el-tour>
  </div>
</template>

<script>
import { ElButton, ElSelect, ElOption, ElCard, ElTour, ElMessage } from 'element-plus'

export default {
  name: 'AudioControls',
  components: {
    ElButton,
    ElSelect,
    ElOption,
    ElCard,
    ElTour
  },
  props: {
    currentIndex: {
      type: Number,
      default: 0
    },
    totalItems: {
      type: Number,
      default: 0
    },
    isPlaying: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.readTourShowedFromLocalStorage()) return
      this.previousBtnRef = this.$refs.previousBtn.ref
      this.playBtnRef = this.$refs.playBtn.ref
      this.nextBtnRef = this.$refs.nextBtn.ref
      this.isLargeScreen() && (this.openTour = true)
      this.writeTourShowdToLocalStorage()
    })
  },
  data() {
    return {
      tourShowed: false,
      previousBtnRef: null,
      playBtnRef: null,
      nextBtnRef: null,
      openTour: false,
      playbackSpeed: '1.0',
      speedOptions: [
        { label: '0.5x', value: '0.5' },
        { label: '0.75x', value: '0.75' },
        { label: '1.0x', value: '1.0' },
        { label: '1.25x', value: '1.25' },
        { label: '1.5x', value: '1.5' },
        { label: '2.0x', value: '2.0' }
      ]
    }
  },
  computed: {
    hasNext() {
      return this.currentIndex < this.totalItems - 1
    },
    hasPrevious() {
      return this.currentIndex > 0
    }
  },
  methods: {
    isLargeScreen() {
      return window.innerWidth >= 768
    },
    writeTourShowdToLocalStorage() {
      localStorage.setItem('tourShowed', true)
    },
    readTourShowedFromLocalStorage() {
      return localStorage.getItem('tourShowed') === 'true'
    },
    tourClose() {
      ElMessage.success('重新登录后再次出现该提示')
    },
    playPrevious() {
      this.$emit('previous')
    },
    togglePlayback() {
      this.$emit('toggle-playback')
    },
    playNext() {
      this.$emit('next')
    },
    changeSpeed() {
      this.$emit('speed-change', parseFloat(this.playbackSpeed))
    }
  }
}
</script>

<style scoped lang="scss">
.audio-controls {
  display: flex;
  align-items: center;
  gap: 15px;
  border-radius: 10px;
  padding: 15px;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  flex-wrap: wrap;

  .control-button {
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: none;
    background-color: #f8f9fa;
    color: #333;
    font-weight: 500;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      background-color: #e9ecef;
    }

    &.primary {
      background-color: #409eff;
      color: white;

      &:hover {
        background-color: #337ecc;
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
      }
    }

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;

      &:hover {
        transform: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      }
    }
  }

  .speed-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;

    span {
      color: #212529;
      font-weight: 500;
    }

    .speed-select {
      width: 100px;

      :deep(.el-select__wrapper) {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: box-shadow 0.3s ease;

        &:hover {
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }
      }
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    gap: 4px;
    padding: 2px;
    justify-content: space-around;

    .control-button {
      padding: 10px 15px;
      font-size: 0.9rem;
    }
    .speed-control {
      gap: 5px;
      display: none;

      .speed-select {
        width: 80px;
      }
      margin-left: 0;
    }
  }
}

.tour-content {
  font-size: 1.2rem;
  text-align: center;
  line-height: 2rem;
}

:not(:root):fullscreen {
  .audio-controls {
    justify-content: space-evenly;
    .speed-control {
      margin-left: 0 !important;
    }
  }
}
</style>